<template>
  <el-dialog
    :visible.sync="isShow"
    :append-to-body="true"
    title="菜单编辑"
    width="800px"
    top="60px"
  >
    <div class="dialog-scroll" :style="{ maxHeight }">
      <el-form ref="form" :model="fields" :rules="rules" label-width="80px">
        <columnLayout title="菜单信息" border>
          <div slot="content">
            <el-row>
              <el-col :span="8">
                <el-form-item label="上级菜单" prop="pid">
                  <el-cascader
                    v-model="fields.pid"
                    size="small"
                    :options="parents"
                    :props="{
                      label: 'name',
                      value: 'id',
                      children: 'childrens',
                      checkStrictly: true,
                      emitPath: false,
                    }"
                    clearable
                    placeholder="请选择上级菜单"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="菜单类型" prop="type">
                  <el-radio
                    v-for="item in dicType"
                    :key="item.value"
                    v-model="fields.type"
                    :label="item.value"
                    >{{ item.label }}</el-radio
                  >
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="菜单图标" prop="icon">
                  <el-popover
                    size="mini"
                    placement="bottom-start"
                    width="450"
                    trigger="click"
                    @show="$refs['iconSelect'].reset()"
                  >
                    <IconSelect ref="iconSelect" @selected="selected" />
                    <el-input
                      slot="reference"
                      v-model="fields.icon"
                      placeholder="点击选择图标"
                      readonly
                    >
                      <svg-icon
                        v-if="fields.icon"
                        slot="prefix"
                        :icon-class="fields.icon"
                        class="el-input_icon"
                      />
                      <i
                        v-else
                        slot="prefix"
                        class="el-icon-search el-input_icon"
                      />
                    </el-input>
                  </el-popover>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="菜单名称" prop="name">
                  <el-input
                    v-model.trim="fields.name"
                    autocomplete="off"
                    size="small"
                    placeholder="请输入菜单名称"
                    maxlength="64"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="菜单排序" prop="sort">
                  <el-input-number
                    v-model.trim="fields.sort"
                    size="small"
                    :min="1"
                    :max="999"
                    style="width: 100%"
                    label="菜单排序"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="菜单权限" prop="permission">
                  <el-input
                    v-model.trim="fields.permission"
                    autocomplete="off"
                    size="small"
                    placeholder="请输入菜单权限"
                    maxlength="64"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="链接地址" prop="path">
                  <el-input
                    v-model.trim="fields.path"
                    autocomplete="off"
                    size="small"
                    placeholder="请输入链接地址"
                    maxlength="256"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="组件路由" prop="component">
                  <el-input
                    v-model.trim="fields.component"
                    autocomplete="off"
                    size="small"
                    placeholder="请输入组件路由"
                    maxlength="64"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="是否隐藏" prop="hidden">
                  <el-switch v-model="fields.hidden" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="动态表单" prop="formCode">
                  <el-select v-model="fields.formCode" placeholder="请选择表单">
                    <el-option
                      v-for="item in forms"
                      :key="item.name + '(' + item.language + ')'"
                      :label="item.name + '(' + item.language + ')'"
                      :value="item.formCode"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </columnLayout>
        <columnLayout title="多语言设置">
          <el-button
            slot="column-actioons"
            type="primary"
            size="mini"
            icon="el-icon-plus"
            @click="insertEvent()"
            >新增</el-button
          >
          <vxe-table
            ref="xTable"
            slot="content"
            border
            size="mini"
            :data="tableData"
            :edit-config="{ trigger: 'click', mode: 'row' }"
            resizable
            align="left"
            show-overflow
            show-header-overflow
          >
            <vxe-table-column
              field="languageName"
              title="语言名称"
              width="200"
              :edit-render="{
                name: '$input',
                placeholder: '请输入语言名称',
                props: { type: 'string', placeholder: '请输入语言名称' },
                maxlength: '20',
              }"
            />

            <vxe-table-column field="language" title="语言类型" width="200">
              <template v-slot="{ row }">
                <el-select v-model="row.language">
                  <el-option
                    v-for="item in languages"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </template>
            </vxe-table-column>
            <vxe-table-column title="操作" width="100" align="center">
              <template v-slot="{ row }">
                <el-tooltip content="编辑" placement="bottom" effect="light">
                  <vxe-button
                    v-auth="['admin', 'menu:update']"
                    size="mini"
                    icon="el-icon-edit"
                    status="primary"
                    @click="onEditBtnClick(row)"
                  />
                </el-tooltip>
              </template>
            </vxe-table-column>
          </vxe-table>
        </columnLayout>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button :loading="loading" size="mini" @click="closePage"
        >取消</el-button
      >
      <el-button
        :loading="loading"
        type="primary"
        size="mini"
        @click="onOkBtnClick"
        >保存</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { saveOrUpdate, get } from '@/api/menu'
import { treeForm } from '@/api/form'
import { getDic } from '@/utils/auth'
import IconSelect from '@/components/IconSelect'
import columnLayout from '@/components/columnLayout'
import maxHeight from '@/mixins'
export default {
  components: { IconSelect, columnLayout },
  mixins: [maxHeight],
  props: {
    value: {
      type: Object,
      default: () => Object.create({}),
    },
  },
  data() {
    return {
      isShow: true,
      loading: true,
      fields: {},
      parents: [],
      dicType: [],
      languages: [],
      indexs: 1,
      forms: [],
      tableData: [],
      pnameList: [],
      cachePnameList: [],
      rules: {
        name: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
        type: [{ required: true, message: '请选择菜单类型', trigger: 'blur' }],
        path: [{ required: true, message: '请输入链接地址', trigger: 'blur' }],
        component: [
          { required: true, message: '请输入组件路由', trigger: 'blur' },
        ],
      },
    }
  },
  watch: {
    isShow: function() {
      this.$emit('input', null)
    },
  },
  created() {
    this.dicType = this.$parent.dicType
    this.get(this.value.id || null)
    this.languages = getDic('language')
    const index = this.languages.findIndex((item) => item.value === '')
    this.languages.splice(index, 1)
    this.listForms()
  },
  methods: {
    onClickSaveLanguage() {
      this.indexs === ++this.indexs
    },
    onClickDeleteLanguage(index) {
      this.indexs.splice(index, 1)
    },
    listForms() {
      treeForm(0).then((res) => {
        this.forms = res
      })
    },
    onOkBtnClick() {
      this.submitForm()
    },
    // 选中图标
    selected(name) {
      this.fields.icon = name
    },
    submitForm() {
      this.$refs['form'].validate((valid) => {
        const treeKeys = this.$refs.xTable.getTableData()
        this.fields.names = treeKeys.tableData
        valid &&
          saveOrUpdate(this.fields)
            .then(() => {
              this.isShow = false
              this.$parent.onSearchBtnClick()
            })
            .catch(() => {})
      })
    },
    resetForm() {
      this.$refs['form'].resetFields()
    },
    closePage() {
      this.isShow = false
      this.resetForm()
    },
    async get(id) {
      const res = await get(id)
      if (!res.type) {
        res.type = 'menu'
      }
      this.fields = res
      this.tableData = res.names
      this.parents = [{ name: '一级资源', id: '0' }].concat(res.resouces || [])
      if (!this.fields.pid && this.parents.length) {
        this.fields.pid = this.parents[0].id
      }
      this.loading = false
    },
    insertEvent() {
      const record = {}
      this.$refs.xTable.insert(record)
    },
    ptypeChangeEvent({ row }) {},
  },
}
</script>
